﻿@namespace BootstrapBlazor.Components
@typeparam TItem
@inherits TableBase<TItem>

<div class="table-container">
    <div class="table-toolbar">
        @if (ShowToolbar)
        {
            <div class="float-left table-toolbar-button">
                <TableToolbar>
                    @if (ShowDefaultButtons)
                    {
                        <TableToolbarButton class="btn btn-success" Icon="fa fa-plus" Title="新增" OnClick="@Add" />
                        <TableToolbarButton class="btn btn-danger" Icon="fa fa-remove" Title="删除" OnClick="@ConfirmDelete" data-toggle="popover">
                            <PopoverConfirm @ref="@DeleteConfirm" OnConfirm="@Delete"></PopoverConfirm>
                        </TableToolbarButton>
                        <TableToolbarButton class="btn btn-primary" Icon="fa fa-pencil" Title="编辑" OnClick="@Edit" />
                    }
                    @TableToolbarTemplate
                </TableToolbar>
            </div>
            <div class="float-right table-toolbar-button table-column-right">
                @if (ShowRefresh)
                {
                    <button class="btn btn-secondary" type="button" title="刷新" @onclick="@Query">
                        <i class="fa fa-refresh"></i><span class="d-none d-sm-inline-block">刷新</span>
                    </button>
                }
            </div>
        }
        @if (ShowSearch)
        {
            <div class="float-right table-toolbar-button btn-group">
                <div class="input-group">
                    <BootstrapInput TItem="string" placeholder="搜索" @bind-Value="@SearchText" @onkeyup="@OnKeyUp">
                        <Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
                    </BootstrapInput>
                    <div class="input-group-append">
                        <button class="btn btn-secondary" type="button" title="搜索" @onclick="@SearchClick">
                            <i class="fa fa-search"></i><span class="d-none d-sm-inline-block">搜索</span>
                        </button>
                        <button class="btn btn-secondary" type="button" title="清空过滤" @onclick="@ClearSearchClick">
                            <i class="fa fa-trash"></i><span class="d-none d-sm-inline-block">清空过滤</span>
                        </button>
                        @if (ShowAdvancedSearch)
                        {
                            <button class="@AdvanceSearchClass" type="button" title="高级搜索" @onclick="@AdvancedSearchClick">
                                <i class="fa fa-search-plus"></i><span class="d-none d-sm-inline-block">高级搜索</span>
                            </button>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
    <div class="@WrapperClassName" style="@WrapperStyleName" @ref="TableWrapper">
        <table class="@ClassName">
            <thead>
                <tr>
                    @if (ShowCheckbox)
                    {
                        <th class="@CheckboxColumnClass">
                            <div class="table-cell">
                                <Checkbox TItem="bool" DisplayText="@CheckboxDisplayTextString" State="@HeaderCheckState()" OnStateChanged="@OnHeaderCheck" OnInitializedCallback="@OnCheckboxInit"></Checkbox>
                            </div>
                        </th>
                    }
                    <TableColumnCollection OnSort="@OnSort">
                        <TableColumnContent />
                        @HeaderTemplate?.Invoke(HeaderModel)
                    </TableColumnCollection>
                </tr>
            </thead>
            <tbody>
                @for (int index = 0; index < Items.Count(); index++)
                {
                    <tr>
                        @if (ShowCheckbox)
                        {
                            <td>
                                <div class="table-cell">
                                    <Checkbox TItem="TItem" Value="@Items.ElementAt(index)" State="@RowCheckState(Items.ElementAt(index))" OnStateChanged="@OnCheck" OnInitializedCallback="@OnItemCheckboxInit"></Checkbox>
                                </div>
                            </td>
                        }
                        @RowTemplate?.Invoke(Items.ElementAt(index))
                    </tr>
                }
            </tbody>
            @if (ShowFooter)
            {
                <tfoot>
                    <tr>@TableFooter</tr>
                </tfoot>
            }
        </table>
    </div>
    @if (TotalCount > 0 && IsPagination)
    {
        <div class="table-pagination">
            <Pagination PageItemsSource="@PageItemsSource" PageItems="@PageItems" TotalCount="@TotalCount" PageIndex="@PageIndex" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
        </div>
    }

    @if (OnSave != null || OnAdd != null)
    {
        <Modal @ref="EditModal" Title="@EditModalTitleString" Size="@Size.ExtraLarge" IsCentered="true">
            <ModalBody>
                <ValidateForm @ref="@ValidateForm" Model="@EditModel" OnValidSubmit="@Save">
                    @EditTemplate?.Invoke(EditModel)
                </ValidateForm>
            </ModalBody>
            <ModalFooter>
                <button type="button" class="btn btn-primary" @onclick="e => ValidateForm?.Validate()">
                    <i class="fa fa-save"></i>
                    <span>保存</span>
                </button>
            </ModalFooter>
        </Modal>
    }

    @if (ShowSearch && ShowAdvancedSearch)
    {
        <Modal @ref="@SearchModal" Title="查询条件" Size="@Size.Large" ShowCloseButton="false" IsCentered="true">
            <ModalBody>
                <ValidateForm Model="@SearchModel">
                    @SearchTemplate?.Invoke(SearchModel)
                </ValidateForm>
            </ModalBody>
            <ModalFooter>
                <button type="button" class="btn btn-info" data-dismiss="modal" @onclick="@ResetSearchClick">
                    <i class="fa fa-trash-o"></i>
                    <span>重置</span>
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @onclick="@SearchClick">
                    <i class="fa fa-search"></i>
                    <span>查询</span>
                </button>
            </ModalFooter>
        </Modal>
    }
</div>
